<template>
  <!-- 轮播图最外层 -->
  <div class="Product-Recommend">
    <!-- 轮播图头部 -->
    <div class="Recommend-Title">
      <img class="Title-img" src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
      <div class="Title-text">严选好物 用心生活</div>
      <img class="Title-bgi" src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">
    </div>
    <!-- 轮播图内容 -->
    <div class="Recommend-swiper">
      <!-- 内容容器 -->
      <van-swipe class="swiper-container" indicator-color="red" :width="90" show-indicators :loop="false" v-for="simg in productStore.productList">
        <van-swipe-item>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
          <div class="container-item">
            <img class="item-img" src="@/../public/static/xhs.png" alt="">
            <div class="item-maintext">hhsdd</div>
            <div class="item-text">钢板屑萨摩</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'ProductRecommend',
})
</script>

<script lang="ts" setup>
import { useproductStore } from '@/stores/product'
import { onMounted } from 'vue'

const productStore = useproductStore()
// 封装函数
function getproductStore() {
  productStore.getProductLsitData()
}

onMounted(() => {
  getproductStore()
})
</script>

<style scoped>
.Product-Recommend {
  position: relative;
  height: 360px;
  background: #eee;
}

.Product-Recommend .Recommend-Title {
  position: absolute;
}

.Product-Recommend .Recommend-Title .Title-img {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 70px
}

.Product-Recommend .Recommend-Title .Title-text {
  position: absolute;
  font-size: 15px;
  top: 45px;
  left: 85px;
  color: #fff;
}

.Product-Recommend .Recommend-Title .Title-bgi {
  width: 375px;
}

.Product-Recommend .Recommend-swiper .swiper-container {
  position: relative;
  background-color: #fff;
  width: 360px;
  height: 280px;
  margin: 0 auto;
  top: 50px;
  border-radius: 10px;
}


.swiper-container .van-swipe-item {
  width: 90px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #fff;
}

.Product-Recommend .Recommend-swiper .swiper-container .container-item {
  display: block;
  width: 70px;
  margin: 20px 0 0 10px;
}

.Product-Recommend .Recommend-swiper .swiper-container .item-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.Product-Recommend .Recommend-swiper .swiper-container .item-maintext {
  font-size: 14px;
  color: #000;
  font-weight: 700;
  margin: 3px 0;
  text-align: center;
}

.Product-Recommend .Recommend-swiper .swiper-container .item-text {
  font-size: 12px;
  color: #999;
  text-align: center;
}
</style>